<template>
  <view>
    <app-nav-bar shadow left-text="业务" color="#007aff" />
    <view class="VerticalBox">
      <scroll-view class="VerticalNav" scroll-y scroll-with-animation style="height: 100vh">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="item"
          :class="index == tabCur ? 'text-green cur' : ''"
          :data-id="index"
          @tap="TabSelect"
        >
          Tab-{{ item.name }}
        </view>
      </scroll-view>
      <view class="VerticalMain">
        <image
          class="image-right"
          src="https://files.axshare.com/gsc/XGMP0L/51/48/0d/51480d18656c4b429606398987a98e9e/images/首页示例/u8.png?pageId=96b468a4-b6c1-49b2-a899-09472dc46f85"
          alt=""
        />

        <uni-section title="需求订单">
          <uni-grid :column="3" :highlight="true" :show-border="false" @change="change">
            <uni-grid-item v-for="(item, index) in 12" :key="index" :index="index">
              <view class="grid-item-box" style="background-color: #fff">
                <uni-icons type="image" :size="30" color="#777" />
                <text class="text">文本信息</text>
              </view>
            </uni-grid-item>
          </uni-grid>
        </uni-section>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      tabCur: 0,
      load: true
    }
  },
  onLoad() {
    uni.showLoading({
      title: '加载中...',
      mask: true
    })
    const list = [{}]
    for (let i = 0; i < 26; i++) {
      list[i] = {}
      list[i].name = String.fromCharCode(65 + i)
      list[i].id = i
    }
    this.list = list
    this.listCur = list[0]
  },
  onReady() {
    uni.hideLoading()
  },
  methods: {
    TabSelect(e) {
      this.tabCur = e.currentTarget.dataset.id
    }
  }
}
</script>

<style lang="scss">
.fixed {
  position: fixed;
  z-index: 99;
}

.VerticalBox {
  display: flex;

  .VerticalNav {
    width: 200rpx;
    white-space: initial;
    border-right: 1px solid $uni-border-color;

    .item {
      width: 100%;
      text-align: center;
      background-color: #fff;
      margin: 0;
      border: none;
      height: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      &.cur {
        background-color: #f1f1f1;
        color: $uni-color-primary;

        &::after {
          position: absolute;
          background: $uni-color-primary;
          width: 8rpx;
          content: '';
          height: 50px;
          left: 0;
        }
      }
    }
  }

  .VerticalMain {
    background-color: #f1f1f1;
    flex: 1;

    .image-right {
      width: calc(100vw - 200rpx);
      height: 240rpx;
    }
  }
}
</style>
